<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .clearfix:after{
            content:"";
            clear:both;
            display:table;
        }
        #box{
            width:990px;
            margin:0 auto;
        }
        .template{
            width:22%;
            float:left;
            margin:5px;
            display:none;
            border:1px solid #ccc;
        }
        .template:hover{
            border:1px solid #f40;
        }
        .text{
            padding:0 8px 8px 8px;
        }

        .pic img{
            width:100%;
            height:220px;
         }
        .main1{
            margin-top:10px;
            height:22px;
            line-height:22px;
            overflow: hidden;

        }
        .yen{
            font-size:18px;
            font-family:Arial;
            line-height:22px;
            height:22px;
            color:#f40;
        }
        .price{
            font-size:16px;
            font-family:Arial;
            line-height:22px;
            height:22px;
            font-weight:700;
            color:#f40;
        }

        .main1_bg{
            display:inline-block;
            margin:4px 2px 0 0;
            background:url("taobao.png") no-repeat -42px -139px;
            width:27px;
            height:14px;
        }
        .person{
            color:#888;
            font-size:12px;
            font-family:arial,'Hiragino Sans GB',"\5b8b\4f53",sans-serif;
        }
        .main2 a{
            text-decoration:none;
        }
        .main2 .title{
            font-size:12px;
            color:#3d3d3d;
            margin-top:6px;
        }
        .dsrs{
            vertical-align:middle;
            margin-top:5px;
        }
        .dsrs .dsr{
            margin-top:2px;
            height:2px;
            width:8px;
            background:#f40;
            display:block;
        }
        .shop_name{
            color:#888;
            text-decoration:underline;
            line-height:22px;
            font-size:12px;
            font-family:arial,'Hiragino Sans GB',"\5b8b\4f53",sans-serif;
        }
        .address{
            color:#888;
            line-height:22px;
            font-size:12px;
            margin-right:4px;
        }
        .icons .icon1{
            background:url("taobao.png") no-repeat -213px -199px;
            width:16px;
            height:16px;
        }
        .icons .icon2{
            background:url("taobao.png") no-repeat -83px -199px;
            width:16px;
            height:16px;
            margin-left: 4px;
        }
        .icons .icon3{
            background:url("taobao2.png") no-repeat -435px -86px;
            width:16px;
            height:16px;
        }
        .paging{
            width:990px;
            margin:10px auto;
            padding-left: 520px;
        }
        .paging .nowspan{
            background:#f40;
            border:none;
            color:#444;
            display: inline-block;
            width:30px;
            height:30px;
            line-height:30px;
            box-sizing: border-box;
            text-align:center;
        }
        .paging span:hover{
            border:1px solid #f40;
            width:30px;
            height:30px;
            box-sizing: border-box;
        }
        .paging span{
            display:block;
            width:30px;
            height:30px;
            box-sizing: border-box;
            float:left;
            line-height:30px;
            text-align:center;
            margin:4px;
            border:1px solid #cccccc;
        }
    </style>
</head>
<body>

<div id="template" class="template">
    <div class="pic"></div>
    <div class="text">
        <div class="main1 clearfix">
            <span class="yen fl">￥</span>
            <span class="price fl"></span>
            <span class="main1_bg fl"></span>
            <span class="person fr">persons</span>
        </div>
        <div class="main2 clearfix">
            <a href="#"><span class="title"></span></a>
        </div>
        <div class="shop clearfix">
            <span class="dsrs fl">
                <span class="dsr"></span>
                <span class="dsr"></span>
                <span class="dsr"></span>
            </span>
            <span class="shop_name fl"></span>
            <span class="address fr"></span></div>
        <div class="icons clearfix">
            <span class="icon1 fl"></span>
            <span class="icon2 fl"></span>
            <span class="icon3 fr"></span>
        </div>
    </div>
</div>

<div id="box" class="clearfix"></div>

<div class="paging clearfix">
    <script>
        for(var i=1;i<10;i++){
            if(i==1) {
                document.write("<span class='nowspan'>"+i+"</span>");
            }else{
                document.write("<span>"+i+"</span>");
            }
        }
        var paging=document.getElementsByClassName("paging")[0];
        var spans=paging.getElementsByTagName("span");
        for(var i=0;i<spans.length;i++){
            spans[i].onclick=function(){
                for(var j=0;j<spans.length;j++){
                    spans[j].className="";
                }
                this.className="nowspan";
                nextPage(this);
            }
        }
    </script>
</div>


<script>
    var p=1;
    function nextPage(span1){
        p=parseInt(span1.innerHTML);
        loadData();
    }
    loadData();

    function loadData() {
        box.innerHTML="";
        var sp=(p-1)*44;
        $.ajax({
            url: "https://s.taobao.com/search?data-key=s&data-value="+sp+"&ajax=true&_ksTS=1529563692144_1472&q=maxrieny%E6%97%97%E8%88%B0%E5%BA%97&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306&bcoffset=3&ntoffset=0&p4ppushleft=1%2C48&s=0",
            dataType: "jsonp",
            success: function (data) {
                console.log(data);
                for (var i = 0; i < data.mods.itemlist.data.auctions.length; i++) {
                    var p = data.mods.itemlist.data.auctions[i];

                    var newMsg = template.cloneNode(true);
                    newMsg.id = "";
                    newMsg.style.display = "block";
                    var imgs = document.createElement("img");
                    imgs.src = "http:"+p.pic_url;
                    var pic = newMsg.getElementsByClassName("pic")[0];
                    pic.appendChild(imgs);
                    var price = newMsg.getElementsByClassName("price")[0];
                    price.innerHTML = p.view_price;
                    var person = newMsg.getElementsByClassName("person")[0];
                    person.innerHTML = p.view_sales;
                    var title = newMsg.getElementsByClassName("title")[0];
                    title.innerHTML = p.title;
                    var shop_name = newMsg.getElementsByClassName("shop_name")[0];
                    shop_name.innerHTML = p.nick;
                    var address = newMsg.getElementsByClassName("address")[0];
                    address.innerHTML = p.item_loc;

                    var box = document.getElementById("box");
                    box.appendChild(newMsg);
                }
            }


        })
    }
</script>
</body>
</html>